<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script type="text/javascript" src="<?=JS_PATH?>jquery.min.js"></script>
    <script src="<?=ASSETS?>time/js/foundation-datepicker.js" type="text/javascript"></script>
    <script src="<?=ASSETS?>time/js/foundation-datepicker.zh-CN.js" type="text/javascript"></script>
    <script type="text/javascript" src="<?=ASSETS?>layer/layer.js"></script>
    <link href="<?=ASSETS?>time/css/foundation-datepicker.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="<?=ASSETS?>bootstrap/bootstrap.min.css" />
    <link   href="<?=ASSETS?>uploadimg/css/bootstrap-fileinput.css" rel="stylesheet">
    <link href="<?=ASSETS?>city/css/areaStyle.css" rel="stylesheet" type="text/css" />
    <title>文章列表</title>
</head>
<style>
    .edit{
        width:20px;
    }
    div span{
        margin-left: 10%;
        font-size: 12px;
    }
    .mymargin{
        margin-left: 10%;
    }
    .code {
        padding: 2px 4px;
        font-size: 14px;
        color: #c7254e;
        background-color: #f9f2f4;
        border-radius: 4px;
    }
    .leftPark {
        height: 300px;
        width: 450px;
        float: left;
        padding: 20px;
    }
    .rightPark {
        height: 300px;
        width: 450px;
        float: left;
        padding: 20px;
    }
</style>
<script>
    $(function(){
        $("#edit_base_info").click(function(){
            var status  = $(this).attr("data-title");
            var my = $(this);
            var inputs =  $("#base_info_div").find("input");
            var spans = $("#base_info_div div[id!='user_name']").find("span[id!='ctime']");
            var resume = $("#base_info_div textarea");
            var resume_value = $("#resume_value");
            inputs.each(function(index){
                if(index!=1)
                    $(this).addClass("mymargin");
                else
                    $(this).css("margin-left","5.5%");
            });
            if(status=="show")
            {
                inputs.each(function(index){
                    $(this).removeClass("hidden");
                    $(this).attr("value",spans.eq(index).html());
                });
                spans.each(function(index){
                    $(this).hide()
                });
                resume.removeClass("hidden");
                resume.html(resume_value.text());
                resume_value.hide();
                $(this).text("保存信息");
                $(this).attr("data-title","edit");
            }
            else{
                //发送修改数据
                var obj = new Object();
                obj.type="update";
                obj.nick_name = inputs.eq(0).val();
                obj.address = inputs.eq(1).val();
                obj.birthday = inputs.eq(2).val();
                obj.job = inputs.eq(3).val();
                obj.github_addr = inputs.eq(4).val();
                resume.text(resume_value.text());
                obj.resume = resume.val() ;
                var url = "<?=web_url('myself/base_info',true)?>";
                $.post(url,obj,function(info,status){
                    //获取最新数据显示
                    spans.eq(0).text(info.nick_name);
                    spans.eq(1).text(info.address);
                    spans.eq(2).text(info.birthday);
                    spans.eq(3).text(info.user_job);
                    spans.eq(4).text(info.github_addr);
                    inputs.each(function(index){
                        $(this).addClass("hidden");
                    });
                    spans.each(function(index){
                        $(this).show();
                    });
                    resume.addClass("hidden");
                    resume_value.text(info.resume);
                    resume_value.show();
                    my.text("编辑信息");
                    my.attr("data-title","show");
                    layer.msg("保存成功");
                },'json');
            }
        });
        $("#edit_con_info").click(function(){
            var my = $(this);
            var status = $("#edit_con_info").attr("data-title");
            var inputs =  $("#con_info_div").find("input");
            var spans = $("#con_info_div").find("span");
            if(status=="show")
            {
                inputs.each(function(index){
                    $(this).removeClass("hidden");
                    $(this).attr("value",spans.eq(index).html());
                });
                spans.each(function(index){
                    $(this).hide()
                });
                my.text("保存信息");
                $(this).attr("data-title","edit");
            }
            else{
                var obj = new Object();
                var url = "<?=web_url('myself/base_info',true)?>";
                obj.type="update_con_info";
                obj.qq_num = inputs.eq(0).val();
                obj.user_email = inputs.eq(1).val();
                $.post(url,obj,function(data,status){
                    spans.eq(0).text(data.qq_num);
                    spans.eq(1).text(data.user_email);
                    inputs.each(function(index){
                        $(this).addClass("hidden");
                    });
                    spans.each(function(index){
                        $(this).show();
                    });
                    my.text("编辑信息");
                    my.attr("data-title","show");
                },'json');
                layer.msg("保存成功");
            }
        });
        $("#edit_edu_info").click(function(){
            var my = $(this);
            var edu_area = $("#edu_textarea");
            var edu_info = $("#edu_info");
            var status= my.attr("data-title");
            if(status=="show")
            {
                edu_info.addClass("hidden");
                edu_area.removeClass("hidden");
                edu_area.text(edu_info.text());
                my.text("保存信息");
                my.attr("data-title","edit");
            }else{
                var obj = new Object();
                var url = "<?=web_url('myself/base_info',true)?>";
                obj.type="update_edu_info";
                obj.edu_info = edu_area.val();
                $.post(url,obj,function(data,status){
                    edu_info.text(data.edu_info);
                    edu_area.addClass("hidden");
                    edu_info.removeClass("hidden");
                    my.text("编辑信息");
                    layer.msg("保存成功");
                },'json');
                my.attr("data-title","show");
            }
        });
        $("#gender").change(function(){
            var obj = new Object();
            obj.type="update_gender";
            var url = "<?=web_url('myself/base_info',true)?>";
            var option= $(this).find("option:selected");
            var value = option.text();
            obj.gender = value;
            $.post(url,obj,function(obj2,status){
            },'json');
            layer.msg("保存成功");
        });
        var today = new Date();
        var   month = today.getMonth()+1;
        var today_str = today.getFullYear()+"-"+month+"-"+today.getDate();
        $("#birthday").fdatepicker({
            format: 'yyyy-mm-dd',
            pickTime: false,
            startDate:'1890-1-1',
            endDate:today_str
        });
    });
</script>
<body>
<div class="container" style="margin-top: 3%">

    <div class="row col-lg-8 form-horizontal col-lg-offset-2">

        <div class="form-group form-inline" >

            <lable id="base_info" >关于-头像</lable>
            <button id="up" data-title="show" style="height: 20px;" class=" form-control btn-primary btn-xs  col-lg-offset-10">编辑头像</button>
            <hr style="margin: 0px 0px 10px 0px;"/>
        </div>

        <div class="col-lg-7">

           <p>

               <?=$db_user->about?>

           </p>

        </div>

        <div class="form-group col-lg-4">

            <img id="my_inco" style="margin-top: 5%" class="img img-responsive img-thumbnail" src="<?=$db_user->icon_addr?>">

        </div>

    </div>


    <div style="margin-top: 25px;" id="base_info_div" class="row col-lg-8 form-horizontal col-lg-offset-2">
        <div class="form-group form-inline" >

            <lable id="base_info" >基本信息</lable>
            <button id="edit_base_info" data-title="show" style="height: 20px;" class=" form-control btn-primary btn-xs  col-lg-offset-10">编辑信息</button>
            <hr style="margin: 0px 0px 10px 0px;"/>
        </div>
        <div id="user_name" class="form-group form-inline col-lg-7">

            <lable>登录名</lable>
            <span id="user_name_value"><?=$sess_user->user_name?></span>

        </div>
        <div class="form-group form-inline col-lg-7">

            <lable>昵&nbsp;&nbsp;&nbsp;称</lable>
            <span id="nick_name_value"><?=$db_user->nick_name?></span>
            <input name="nick_name" type="text" class="form-control hidden input-sm"/>

        </div>
        <div class="form-group form-inline col-lg-12">

            <lable>所属地</lable>
            <span style="margin-left:5%" id="city_name_value"><?=$db_user->address?></span>
            <input name="address"  id="city" type="text"   class="form-control area_input hidden input-sm"/>

        </div>
        <div class="form-group form-inline col-lg-7">

            <lable>性&nbsp;&nbsp;&nbsp;别</lable>
            <select name="gender" id="gender" class="form-control input-sm mymargin">
                <option>男</option>
                <option <?php if($db_user->gender=='女'):?> selected="selected" <?php endif; ?> >女</option>
            </select>

        </div>
        <div class="form-group form-inline col-lg-7">

            <lable>生&nbsp;&nbsp;&nbsp;日</lable>
            <span id="birth_day_value"><?=$db_user->birthday?></span>
            <input id="birthday" name="birthday" type="text" class="form-control hidden input-sm"/>

        </div>
        <div class="form-group form-inline col-lg-7">

            <lable>职&nbsp;&nbsp;&nbsp;业</lable>
            <span id="github_value"><?=$db_user->user_job?></span>
            <input name="job" type="text" class="form-control hidden input-sm"/>

        </div>
        <div class="form-group form-inline col-lg-7">

            <lable>github</lable>
            <span id="github_value"><?=$db_user->github_addr?></span>
            <input name="github_addr" type="text" class="form-control hidden input-sm"/>

        </div>
        <div class="form-group form-inline col-lg-7">

            <lable>简&nbsp;&nbsp;&nbsp;介</lable><br/><br/>
            <p class="text-center" id="resume_value"><?=$db_user->resume?></p>
            <textarea name="resume" class="hidden" cols="102" rows="3"></textarea>

        </div>
        <div class="form-group form-inline col-lg-7" style="margin-left: -4.5%;">

            <lable>注册时间</lable>
            <span id="ctime"><?=$sess_user->ctime?></span>

        </div>
    </div>

    <div id="con_info_div" class="row col-lg-8 form-horizontal col-lg-offset-2">
        <div class="form-group form-inline" >
            <lable>联系信息</lable>
            <button style="height: 20px;"  id="edit_con_info"  data-title="show"  class=" form-control btn-primary btn-xs  col-lg-offset-10">编辑信息</button>
            <hr style="margin: 0px 0px 10px 0px;"/>

        </div>
        <div class="form-group form-inline col-lg-7">

            <lable>Q&nbsp;&nbsp;&nbsp;Q</lable>
            <span><?=$db_user->qq_num?></span>
            <input type="text" class="form-control hidden input-sm"/>

        </div>
        <div class="form-group form-inline col-lg-7">
            <lable>邮&nbsp;&nbsp;箱</lable>
            <span><?=$db_user->user_email?></span>
            <input type="text" class="form-control hidden input-sm"/>
        </div>
    </div>
    <div id="edu_info_div" class="row col-lg-8 form-horizontal col-lg-offset-2">
        <div class="form-group form-inline" >
            <lable>教育信息</lable>
            <button style="height: 20px;" id="edit_edu_info" data-title="show" class=" form-control btn-primary btn-xs  col-lg-offset-10">编辑信息</button>
            <hr style="margin: 0px 0px 10px 0px;"/>

        </div>
        <div class="form-group col-lg-7">
            <lable>教育经历</lable><br/><br/>
            <p class="text-center" id="edu_info"><?=$db_user->edu_info?></p>
            <textarea id="edu_textarea" class="hidden" cols="102" rows="3"></textarea>
        </div>
    </div>

</div>
<script src="<?=ASSETS?>bootstrap/bootstrap.js"></script>
<script src="<?=ASSETS?>city/js/charfirstPinyin.js"></script>
<script src="<?=ASSETS?>city/js/area.js"></script>
<script src="<?=ASSETS?>uploadimg/js/bootstrap-fileinput.js"></script>
<script>
    $(function(){
        $("#city").areaSelector();

        $("#up").click(function(){


            var my = $(this);
            var status = my.attr("data-title");

            if(status=="show")
            {

                layer.open({
                    type: 1,
                    skin: 'layui-layer-lan', //样式类名
                    area: ['500px', '390px'],
                    title:'更换头像',
                    anim: 2,
                    resize:false,
                    scrollbar: false,
                    closeBtn:1,
                    cancel:function(){
                        my.attr("data-title","show");
                        my.text("编辑头像");
                    },
                    shade:false,
                    shadeClose: true, //开启遮罩关闭
                    content:'<div style="margin-left:3%;" class="page-header">'+
                    '<form id="uploadForm" enctype="multipart/form-data"><div class="form-group"   >'+
                    '<div class="fileinput fileinput-new" data-provides="fileinput"  id="exampleInputUpload">'+
                    '<div class="fileinput-new thumbnail" style="width: 200px;height: auto;max-height:205px;">'+
                    '<img id="picImg" style="width: 100%;height: auto;max-height: 200px;" src="" alt="" /></div>'+
                    '<div class="fileinput-preview fileinput-exists thumbnail" style="max-width: 200px; max-height: 200px;"></div>'+
                    '<div style="margin-top:10px;"><span class="btn btn-primary  btn-file">'+
                    '<span class="fileinput-new ">选择图片</span>'+
                    '<span class="fileinput-exists">换一张</span>'+
                    '<input type="file" name="icon" id="picID" accept="image/gif,image/jpeg,image/x-png"/>'+
                    '</span><a href="javascript:;" style="margin-left:10px;" class="btn  btn-warning fileinput-exists" data-dismiss="fileinput">移除</a>&nbsp;&nbsp;&nbsp;'+
                    '</div></div></div> '
                    +'</form> </div> '

                });
                $("#picImg").attr("src",$("#my_inco").attr("src"));



                my.text("保存头像");
                my.attr("data-title","edit");
            }
            else
            {

                if($("#picID").val()=="")
                {
                    layer.msg("你没有选中图片");
                    return;
                }

                var data = new FormData($('#uploadForm')[0]);
                $.ajax({
                    url: '<?=web_url('myself/upload_icon',true)?>',
                    type: 'POST',
                    data: data,
                    async: true,
                    cache: false,
                    contentType: false,
                    processData: false,
                    dataType:'json',
                    success: function (data) {


                        if(data){


                            if(data.code==1)
                            {
                               $("#my_inco").attr("src",data.message);
                               layer.msg("保存成功");
                            }else{
                                layer.msg(data.message);
                            }

                        }else{
                            layer.msg(data.message);
                        }
                    },
                    error: function (data) {
                        console.log(data.status);
                    }
                });


                layer.closeAll();
                my.attr("data-title","show");
                my.text("编辑头像");
            }

        });

    });
</script>


</body>
</html>